<template>
    <div class="app-container">
      <div class="filter-container">
        <el-input v-model="listQuery.phone" placeholder="请输入手机号" style="width: 200px;" class="filter-item"/>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          Search
        </el-button>
        <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
          Add
        </el-button> -->
      </div>
  
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id" align="center" width="80">
          <template slot-scope="{row}">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓" prop="passengerSurname" align="center">
          <template slot-scope="{row}">
            <span>{{ row.passengerSurname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="passengerName" align="center">
          <template slot-scope="{row}">
            <span>{{ row.passengerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" prop="passengerPhone" align="center">
          <template slot-scope="{row}">
            <span>{{ row.passengerPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="passengerGender" align="center">
          <template slot-scope="{row}">
            <span>{{ row.passengerGender == 1 ? '男' : '女' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <!-- <el-button type="primary" size="mini" @click="handleUpdate(row)">
              Edit
            </el-button> -->
            <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
              Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
          <el-form-item label="姓" prop="passengerSurname">
            <el-input v-model="temp.passengerSurname" />
          </el-form-item>
          <el-form-item label="姓名" prop="passengerName">
            <el-input v-model="temp.passengerName" />
          </el-form-item>
          <el-form-item v-if="dialogStatus === 'create'" label="电话" prop="passengerPhone">
            <el-input v-model="temp.passengerPhone" />
          </el-form-item>
          <el-form-item label="性别" prop="passengerGender">
            <el-radio-group v-model="temp.passengerGender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            Cancel
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?createDate():UpdateDate()">
            Confirm
          </el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { fetchList } from '@/api/passengerUser.js'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  
  export default {
    name: 'passenger',
    components: { Pagination },
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      },
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20
        },
        temp: {
          passengerSurname: "",
          passengerName: "",
          passengerPhone: "",
          passengerGender: 1
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '新增'
        },
        downloadLoading: false
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = response.data.items
          this.total = response.data.total
  
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
  
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
  
      handleModifyStatus(row, status) {
        this.$message({
          message: '操作Success',
          type: 'success'
        })
        row.status = status
      },
      
      handleCreate() {
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        // 在添加时，清空 temp 对象，以确保不提交 ID
        this.temp = {
          passengerSurname: "",
          passengerName: "",
          passengerPhone: "",
          passengerGender: 1
        }
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      handleUpdate(row) {
        this.dialogStatus = 'update';
        this.dialogFormVisible = true;
        this.temp = {
          id: row.id,
          passengerSurname: row.passengerSurname,
          passengerName: row.passengerName,
          passengerPhone: row.passengerPhone,
          passengerGender: row.passengerGender
        };
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate();
        });
      },
  
      handleDelete(row, index) {
        this.$notify({
          title: 'Success',
          message: 'Delete Successfully',
          type: 'success',
          duration: 2000
        })
        this.list.splice(index, 1)
      },
  
      // createDate() {
      //   console.log(this.temp);
      //   createOrUpdatepassengerUser(this.temp).then(() => {
      //     this.dialogFormVisible = false;
      //     this.getList();
      //   }).catch(error => {
      //     console.error('Failed to create item:', error);
      //   });
      // },
  
      // UpdateDate() {
      //   console.log(this.temp);
      //   createOrUpdatepassengerUser(this.temp).then(() => {
      //     this.dialogFormVisible = false;
      //     this.getList();
      //   }).catch(error => {
      //     console.error('Failed to update item:', error);
      //   });
      // },
    }
  }
  </script>